<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .tabs {
            max-width: 800px;
            margin: 20px auto;
        }

        .tab-headers {
            display: flex;
            border-bottom: 1px solid #ddd;
        }

        .tab-header {
            padding: 12px 24px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
        }

        .tab-header.active {
            border-color: #2196F3;
            color: #2196F3;
        }

        .tab-contents {
            border: 1px solid #ddd;
            border-top: none;
        }

        .tab-content {
            display: none;
            padding: 20px;
        }

        .tab-content.active {
            display: block;
        }
    </style>
</head>
<body>
<div class="tabs">
    <div class="tab-headers">
        <div class="tab-header active">标签1</div>
        <div class="tab-header">标签2</div>
        <div class="tab-header">标签3</div>
    </div>

    <div class="tab-contents">
        <div class="tab-content active">内容1...</div>
        <div class="tab-content">内容2...</div>
        <div class="tab-content">内容3...</div>
    </div>
</div>
<script>
    // 切换样式时，可以通过切换类。
    let tabs = document.querySelector(".tabs");
    // 点击切换标签将active类样式以及内容趋于中的active类样式放在正确的位置上

    tabs.addEventListener("click", (e) => {
        console.log(e.target);
        // 优化
        // 点击的如果是同一个标签，则可以不需要再进行删除添加操作

        // 问题是我们怎么能让内容和标签有关联
        // 先找到点击标签中的元素索引 再用索引到内容区域做对应
        // ...含义： 将元素转换数组类型
        // console.log([...document.querySelectorAll(".tab-headers")[0].children]);
        console.log([...document.querySelector(".tab-headers .active").parentElement.children].indexOf(e.target));

        let index = [...document.querySelector(".tab-headers .active").parentElement.children].indexOf(e.target);
        if (index == -1) {return;}
        // console.log(document.getElementsByClassName("tab-contents")[0].children);
        let content = document.getElementsByClassName("tab-contents")[0].children;

        // 先把之前具有的active类删掉，在给需要active的元素添加
        // console.log(tabs.querySelectorAll(".tab-headers"));
        tabs.querySelectorAll(".tab-header").forEach((tabHeader) => {
            // console.log(tabHeader);
            tabHeader.classList.remove("active");
        });

        tabs.querySelectorAll(".tab-content").forEach((tabContent) => {
            tabContent.classList.remove("active");
        });
        e.target.classList.add("active");
        content[index].classList.add("active");

    })








</script>

</body>
</html>